<template>
	<div class="layer-container">
		<el-scrollbar class="layer-scrollbar">
			<div v-for="(item, index) in componentsData" :key="`menu-${index}`" 
				:class="[{'active': activeComponent.id == item.id && item.type != 'Custom', 'menu-item': item.type != 'Custom'}]">
				
				<div v-if="item.type == 'Custom'">
					<div class="submenu-item" :class="[{'active': activeComponent.id == item.id}]">
						<div class="item-title" @click="selectComponent(item)">
							<span class="color-warning mr10">{{ index+1 }}</span>
							<i class="mr10" :class="item.icon" aria-hidden="true"></i>
							<span class="mr10">{{ item.title }}</span>
							<i class="fa fa-trash-o right mr10 color-danger" aria-hidden="true" @click.stop.prevent="delComponent(index, -1, -1)"></i>
							<i class="fa fa-cogs right mr10" aria-hidden="true" @click="configComponent()"></i>
						</div>
					</div>
					
					<div v-for="(child, number) in item.data.children" :key="`child-${number+1 }`">
						<div v-for="(subitem, sortno) in child.componentsData" :key="`submenu-${sortno}`"
							class="menu-item"
							:class="[{'active': activeComponent.id == subitem.id}]">
							
							<div class="item-title" @click="selectComponent(subitem)">
								<span class="color-warning mr10 ml20">{{ index+1 }}.{{ number+1 }}.{{ sortno+1 }}</span>
								<i class="mr10" :class="subitem.icon" aria-hidden="true"></i>
								<span class="mr10">{{ subitem.title }}</span>
								<i class="fa fa-trash-o right mr10 color-danger" aria-hidden="true" @click.stop.prevent="delComponent(index,number,sortno)"></i>
								<i class="fa fa-cogs right mr10" aria-hidden="true" @click="configComponent()"></i>
							</div>
						</div>
					</div>
				</div>
				
				<div class="item-title" v-else @click="selectComponent(item)">
					<span class="color-warning mr10">{{ index+1 }}</span>
					<i class="mr10" :class="item.icon" aria-hidden="true"></i>
					<span class="mr10">{{ item.title }}</span>
					<i class="fa fa-trash-o right mr10 color-danger" aria-hidden="true" @click.stop.prevent="delComponent(index, -1, -1)"></i>
					<i class="fa fa-cogs right mr10" aria-hidden="true" @click="configComponent()"></i>
				</div>
			</div>
		</el-scrollbar>
	</div>
</template>

<script lang="ts">
	import { toRefs, reactive, onMounted, computed, } from 'vue';
	import { ElMessageBox } from 'element-plus';
	import { useStore } from '/@/store/index';

	export default {
		name: 'canvas-layer',
		components: {},
		setup(props, { emit }) {
			const store = useStore();
			const state = reactive({
				
			});
			
			state.terminal = computed(() => store.state.decorator.terminal);
			state.terminalContent = computed(() => store.state.decorator.terminalContent);
			state.activeComponent = computed(() => store.state.decorator.activeComponent);
			state.componentsData = computed(() => store.state.decorator.componentsData);
			
			const setActiveComponent = (activeComponent) => {
				store.dispatch('decorator/setActiveComponent', activeComponent);
			};
			
			const selectComponent = (activeComponent) => {
				setActiveComponent(activeComponent);
				emit('scroll');
			}
			const configComponent = () => {
				emit('config');
			}
			// 删除组件
			const delComponent = (index, number, sortno) => {
				if(state.terminalContent.confirm){
					ElMessageBox.confirm('确定删除吗？', '提示', {
						confirmButtonText: '删除',
						cancelButtonText: '取消',
						type: 'warning',
					}).then(() => {
						removeComponent(index,number,sortno);
					}).catch(() => {});
				}else{
					removeComponent(index,number,sortno);
				}
			}
			
			const removeComponent = (index, number, sortno) => {
				if(index >= 0 && number < 0 && sortno < 0){
					state.componentsData.splice(index, 1);
				}else{
					state.componentsData[index].data.children[number].componentsData.splice(sortno, 1);
				}
				setActiveComponent({});
			}
			
			onMounted(() => {

			})

			return {
				selectComponent,
				configComponent,
				delComponent,
				...toRefs(state)
			}
		},
	}
</script>

<style lang="scss" scoped>
	.layer-container{
		.layer-scrollbar{
			height: calc(100vh - 320px);
			
			.menu-item {
				display: flex;
				align-items: center;
				justify-content: left;
				height: 32px;
				padding: 0 10px;
				margin-bottom: 5px;
				text-align: left;
				border-radius: 4px;
				background: var(--el-color-primary-light-9);
				color: var(--el-color-primary);
				
				&:hover {
					cursor: pointer;
					border: 1px var(--el-color-primary) dashed;
				}
				
				.item-title {
					height: 100%;
					width: 100%;
					padding: 0;
					margin: 0;
					line-height: 32px;
				}
			}
			
			.submenu-item{
				display: flex;
				align-items: center;
				justify-content: left;
				height: 32px;
				padding: 0 10px;
				margin-bottom: 5px;
				text-align: left;
				border-radius: 4px;
				background: var(--el-color-primary-light-9);
				color: var(--el-color-primary);
				
				&:hover {
					cursor: pointer;
					border: 1px var(--el-color-primary) dashed;
				}
				
				.item-title {
					height: 100%;
					width: 100%;
					padding: 0;
					margin: 0;
					line-height: 32px;
				}
			}
			
			.active {
				cursor: pointer;
				border: 1px var(--el-color-primary) solid;
			}
			.right{
				float: right;
				line-height: 32px;
				font-size: 16px;
			}
		}
	}
</style>
